<template>
  <div style="background-color: #f5f6f7; width: 958px">
    <div class="index-edit-index-frame" >
      <el-form :model="editForm" :rules="rules" ref="editForm"  class="index-edit-index-inputForm">
        <el-form-item label="统计月份" prop="statisticsDate" class="el-form-item">
          <!-- 强制换行 -->
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-date-picker type="month" size="medium" align="left" v-model="editForm.statisticsDate" clearable
                          format="yyyy-MM" value-format="yyyy-MM"  placeholder="选择统计月份"
                          :disabled="isDatePickerActive" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="年化月增速（%）" prop="indexValuePercentage" class="el-form-item-right">
          <el-input v-model="editForm.indexValuePercentage" placeholder="输入年化月增速" maxlength="8" @keyup.native="verifyDecimal(editForm, 'indexValuePercentage')" clearable></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-row class="index-edit-index-btnFrame">
      <el-button class="index-edit-index-btn" @click="submitForm('editForm')" type="primary">{{btnTitle}}</el-button>
    </el-row>
  </div>
</template>
<script>
  import maValidate from 'utils/common-method/validate/index';
  import {validateTips} from 'utils/tips';
  import {enums} from '../../../../utils/settings';
  export default {
    components: {
    },
    props: ['indexInfo', 'btnTitle', 'isDatePickerActive'],
    data() {
      return {
        initForm: JSON.stringify(this.indexInfo),
        editForm: JSON.parse(JSON.stringify(this.indexInfo)),
        rules: {
          statisticsDate: [
            {required: true, message: validateTips.FILL_BASE_INFO, trigger: 'blur'}
          ],
          indexValuePercentage: [
            {required: true, message: validateTips.FILL_BASE_INFO, trigger: 'blur'}
          ]
        },
        pickerOptions: {
          disabledDate(time) {
            let date = new Date();
            date.setMonth(date.getMonth() - 1);
            return time.getTime() > date - 8.64e7;
          }
        }
      };
    },
    created() {
      this.editForm = JSON.parse(JSON.stringify(this.indexInfo));
    },
    methods: {
      // 校验整数
      verifyInteger(val, prop) {
        maValidate.verifyInteger(val, prop);
      },
      // 校验小数
      verifyDecimal(val, prop) {
        maValidate.verifyDecimal(val, prop);
      },
      // 点击提交按钮
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.commitForm();
          } else {
            return false;
          }
        });
      },
      // 请求后端接口
      commitForm() {
        // 内容检查：判断提交前后有无内容变化
        if (this.initForm === JSON.stringify(this.editForm)) {
          this.errorTip('内容没有任何变化，请确认');
          return;
        }
        var that = this;
        this.ajax({
          type: 'POST',
          url: '/malisk/server/macro/saveMacroIndex',
          data: {
            id: that.editForm.id,
            version: that.editForm.version,
            statisticsDate: that.editForm.statisticsDate + '-01 00:00:00',
            indexType: enums.SK_INDEX_TYPE.NHYZS,
            indexValue: (parseFloat(that.editForm.indexValuePercentage) / 100)
          },
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              if (that.editForm.id === null || that.editForm.id === '') {
                this.successTip('新增成功', 2000);
              } else {
                this.successTip('更新成功', 2000);
              }
              that.$emit('sure');
            } else {
              this.errorTip(res.message);
            }
          }
        });
      }
    }
  };
</script>
<style>
  .index-edit-index-frame {
    display: flex;
    flex-wrap: wrap;
    width: 958px;
    height: 110px;
    border: 1px solid #e5e5e5;
    background-color: white
  }
  .index-edit-index-frame .el-form-item {
    display: inline-block;
    width: 420px;
    margin-left: 20px;
    margin-right: 20px;
  }
  .index-edit-index-frame .el-form-item-right {
    float: right;
  }
  .index-edit-index-inputForm {
    margin-top:10px;
  }
  .index-edit-index-btnFrame {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center;
  }
  .index-edit-index-btn {
    width: 140px;
    height: 40px;
  }
</style>
